<template lang="pug">
  keep-alive
    kalix-table(bizKey="Img" title='图片管理列表' ref="kalixTable"
    v-bind:tableFields="tableFields"
    v-bind:targetURL="targetURL"
    v-bind:bizDialog="ImgDialog"
    v-bind:btnList="ImgBtnList"
    v-bind:toolbarBtnList="toolbarBtnList"
    bizSearch="ImgSearch")
      template(slot="tableColumnSlot")
        el-table-column(prop="imgUrl"  label="图片" align="center")
          template(slot-scope="scope")
            <!--img(v-bind:src="scope.row.imgUrl" width="32" height="32" alt="")-->
            div(v-for="img in getArray(scope.row.imgUrl)")
              img(v-bind:src="img" width="60" height="60" alt="" style="float:left; margin-right: 8px")
            <!--img(v-else src="/static/images/default_user.png" width="32" height="32" alt="")-->
        el-table-column(prop="type"  label="类型")
        el-table-column(prop="identify" label="标识")
</template>
<!--v-bind:buttonPermissionPrefix="buttonPermissionPrefix"-->
<!--v-bind:customTableTool="callCustomTableTool"-->
<script type="text/ecmascript-6">
  import {ImgURL, ImgBtnPermissionPrefix} from '../config.toml'
  import {ImgConfigBtnList} from './config'
  import KalixTable from '../../../../components/corelib/components/common/baseTable'
  import KalixImgUpload from '../../../../components/corelib/components/common/imgUpload'

  export default {
    name: 'kalix-mooc-img',
    components: {KalixImgUpload, KalixTable},
    data() {
      return {
        targetURL: ImgURL,
        tableFields: [
          {prop: 'imgUrl', label: '图片'},
          {prop: 'type', label: '类型'},
          {prop: 'identify', label: '标识'}
        ],
        ImgDialog: [
          {id: 'add', dialog: 'ImgAdd'},
          {id: 'edit', dialog: 'ImgEdit'},
          {id: 'delete', dialog: 'ImgDelete'}
        ],
        ImgBtnList: ImgConfigBtnList,
        toolbarBtnList: [
          {id: 'add', isShow: true, title: '添加', icon: 'icon-pinleizengjia', isPermission: true}
        ],
        buttonPermissionPrefix: ImgBtnPermissionPrefix
      }
    },
    methods: {
      getArray(val) {
        return val.split(',')
      }
    }
  }
</script>

<style scoped lang="stylus">

</style>
<style lang="stylus">
  .el-form .el-input
    width 100%
</style>
